<template>
  <div class="prohibit-product-map">
    <div class="prohibit-product-map-box" id="map-container"></div>
    <div class="all-checkbox-list">
      <nanning-screen-checkbox @on-change-checkbox="onChangeCheckbox" @on-change-visible="onChangeVisible" v-model="checkedLabel" :visibleCheckboxList="visibleCheckboxList"></nanning-screen-checkbox>
    </div>
    <passenger-infor-pop id="passenger-infor-pop"></passenger-infor-pop>
    <!-- <prohibite-detail-pop id="prohibite-detail-pop"></prohibite-detail-pop> -->
    <search-pop id="search-pop"></search-pop>
    <!-- <marker-hot id="marker-hot"></marker-hot> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import passengerInforPop from '../../components/passengerInforPop/index.vue'
import prohibiteDetailPop from '../../components/prohibiteDetailPop/index.vue'
import searchPop from '../../components/searchPop/index.vue'
import markerHot from '../../components/markerHot/index.vue'
import Bus from 'utils/eventBus'
// @ts-ignore
import ProhibitedProduct from '../../../basic/ProhibitedProduct.js'

@Component({
  name: 'prohibit-product-map',
  components: {
    passengerInforPop,
    prohibiteDetailPop,
    searchPop,
    markerHot
  }
})
export default class ProhibiteProductMapMap extends Vue {
  private checkedLabel = [1, 2, 3] // 默认选中的值

  private visibleCheckboxList = true

  private onChangeCheckbox(value: any) {
    console.log('多选框选中的值', value)
  }

  private onChangeVisible(value: any) {
    this.visibleCheckboxList = value
  }

  created() {
    Bus.$on('onClickProhibitedSearch', (value: any) => {
      console.log('搜索框改变了---地图盒子', value)
    })
  }
  mounted() {
    this.initMap()
  }
  initMap() {
    const map = new ProhibitedProduct()
  }
}
</script>

<style lang="scss" scoped>
.prohibit-product-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
  .all-checkbox-list {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: calc(25.47% + 6px);
    top: 20px;
    animation: fadeInLeftList 0.7s linear;
  }
  // #passenger-infor-pop {
  //   position: absolute; // 定位的基准是中间地图的大盒子
  //   left: 58%;
  //   top: 50%;
  // }
  #prohibite-detail-pop {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: 35%;
    top: 50%;
  }
  #search-pop {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
  }
  // #marker-hot {
  //   position: absolute; // 定位的基准是中间地图的大盒子
  //   left: 35%;
  //   top: 50%;
  // }
}
</style>
